<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>奢侈品牌时尚购物平台---独狼</title>
    <link rel="stylesheet" href="./bootStrap/css/bootstrap.css">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!--顶部不会变的  -->
    <header>
        <!--顶部上面的部分  -->
        <div class="header-top">
            <div class="center">
                <div class="header-top-left">
                    <ul class="first">
                        <!--女士-->
                        <li class="woman" data-id='female'>女士</li>
                        <!--男士-->
                        <li class="man" data-id='male'>男士</li>
                        <!--儿童-->
                        <li class="child" data-id='children'>儿童</li>
                    </ul>
                </div>
                <div class="header-top-middle">
                    <img src="./images/1.png" alt="">
                </div>
                <div class="header-top-right">
                    <span class="circle-red"></span>
                    <span>CN / CNY (¥)</span>|
                    <span class="glyphicon glyphicon-user"></span>|
                    <span class="glyphicon glyphicon-star"></span>|
                    <span class="glyphicon glyphicon-lock"></span>
                </div>
            </div>
        </div>
        <!--顶部下面的部分  -->
        <div class="header-bottom">
            <div class="middle">
                <div class="header-bottom-left" style='color:white'>
                    <span class="glyphicon glyphicon-eject"></span>
                    <span>请选择女士 / 男士</span>
                </div>
                <div class="female">
                    <ul class="second">
                        <li>新近单品</li>
                        <li>品牌</li>
                        <li>服装</li>
                        <li>鞋履</li>
                        <li>包袋</li>
                        <li>配饰</li>
                        <li>首饰</li>
                        <li>古着</li>
                        <li>潮流资讯</li>
                        <li class="color">S A L E</li>
                    </ul>
                </div>
                <div class="male">
                    <ul class="second">
                        <li>新近单品</li>
                        <li>品牌</li>
                        <li>服装</li>
                        <li>鞋履</li>
                        <li>包袋</li>
                        <li>配饰</li>
                        <li>首饰</li>
                        <li>古着</li>
                        <li>潮流资讯</li>
                        <li class="color">S A L E</li>
                    </ul>
                </div>
                <div class="children">
                    <ul class="second">
                        <li>新进单品</li>
                        <li>品牌</li>
                        <li>女婴</li>
                        <li>男婴</li>
                        <li>女童</li>
                        <li>男童</li>
                        <li class="color">S A L E</li>
                    </ul>
                </div>
                <div class="header-bottom-right">
                    <div class="input-span">
                        <input type="text" style="width:200px" placeholder="搜索">
                        <!--
                        --><span class="glyphicon glyphicon-search"></span>
                    </div>
                    <span class="glyphicon glyphicon-bell"></span>
                </div>
            </div>
        </div>
    </header>



    <!-- main 中间的主体  -->
    <main>
        <div class="gray  ">
            <span class="color"> S A L E</span> |
            <span>低至四折: 现有更多设计师品牌加入</span>
        </div>
        <div class="main-center">
            <div class="main-third">
                <div class="">
                    <span class="glyphicon glyphicon-hand-left  "></span>
                    <h4 class="">免费取货服务</h4>
                </div>|
                <div class="">
                    <span class="glyphicon glyphicon-plane  "></span>
                    <h4 class="">快捷寄送</h4>
                </div>|
                <div class="">
                    <span class="glyphicon glyphicon-hand-right  "></span>
                    <h4 class="">商品结算价格包含关税</h4>
                </div>
            </div>
            <!--  main中 男士女士图片的那个  -->
            <div class="main">
                <div class="main-left">
                    <div class="main-left-top">
                        <figure>
                            <img src="https://cdn-static.farfetch.cn/content/images/Home_CMS/2017_04_24/gender/women-lg.jpg" alt="">
                            <figcaption>
                                <ul>
                                    <li><a href="">新近单品</a></li>
                                    <li><a href="">服装</a></li>
                                    <li><a href="">鞋履</a></li>
                                    <li><a href="">包袋</a></li>
                                    <li><a href="">配饰</a></li>
                                    <li><a href="">古着</a></li>
                                    <li><a href="">本周精选</a></li>
                                </ul>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="nvShi">
                        <h1>选购女士</h1>
                    </div>
                    <div class="main-left-bottom">
                        <ul>
                            <li><a href="">品牌</a></li>
                            <li><a href="">潮流资讯</a></li>
                            <li><a href="">S A L E</a></li>
                        </ul>
                    </div>
                </div>
                <div class="main-right">
                    <div class="main-left-top">
                        <figure>
                            <img src="https://cdn-static.farfetch.cn/content/images/Home_CMS/2017_04_24/gender/men-large.jpg" alt="">
                            <figcaption>
                                <ul>
                                    <li><a href="">新近单品</a></li>
                                    <li><a href="">服装</a></li>
                                    <li><a href="">鞋履</a></li>
                                    <li><a href="">包袋</a></li>
                                    <li><a href="">配饰</a></li>
                                    <li><a href="">古着</a></li>
                                    <li><a href="">本周精选</a></li>
                                </ul>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="nanShi">
                        <h1>选购男士</h1>
                    </div>
                    <div class="main-left-bottom">
                        <ul>
                            <li><a href="">品牌</a></li>
                            <li><a href="">潮流资讯</a></li>
                            <li><a href="">S A L E</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- main中下面那三个  -->
            <div id="box">
                <p id="pp">全球多元化时尚精品购物平台</p>
                <ul>
                    <li>
                        <img id="daoYing" src="https://cdn-static.farfetch.cn/content/images/Home_CMS/2017_02_27/unisex/01_large.jpg">
                        <div class="text">
                            <p>伦敦,英国y</p>
                            <p>BROWNS</p>
                            <div>即刻选购</div>
                        </div>
                    </li>
                    <li>
                        <img src="https://cdn-static.farfetch.cn/content/images/Home_CMS/2017_02_27/Unisex/02_large-min.jpg">
                        <div class="text">
                            <p>华沙,波兰</p>
                            <p>VITKAC</p>
                            <div>即刻选购</div>
                        </div>
                    </li>
                    <li>
                        <img src="https://cdn-static.farfetch.cn/content/images/Home_CMS/2017_02_27/Unisex/03_large-min.jpg">
                        <div class="text">
                            <p>特拉帕尼,意大利</p>
                            <p>STEFANIA MODE</p>
                            <div>即刻选购</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </main>

    <!--footer 页脚部分  -->
    <footer>
        <div class="footer-top">
            <div class="footer-top-center">
                <div class="footer-border">
                    <h4 class="">
                        <span class="glyphicon glyphicon-hand-left  "></span> 如何购物
                    </h4>
                </div>
                <div class="">
                    <h4 class="">
                        <span class="glyphicon glyphicon-plane  "></span> 常见问题
                    </h4>
                </div>
                <div class="">
                    <h4 class="">
                        <span class="glyphicon glyphicon-hand-right  "></span> 需要帮助?
                    </h4>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer-bottom">
                <div class="footer-bottom-four">
                    <div class="four-left">
                        <p>最新资讯</p>
                        <input type="text" placeholder="订阅电子报">
                        <p>阅读我们的隐私与Cookie政策 <a>点击此处</a></p>
                    </div>
                    <div class="four-center"></div>
                    <div class="four-right"></div>
                </div>
                <div class="footer-bottom-bottom"></div>
            </div>
        </div>
    </footer>



    <script src="./js/jquery.js"></script>
    <script src="./bootStrap/js/bootstrap.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>